<template>
    <div class="center-bottom-card">
        <CategorySelect class="center-bottom-card-category-select"></CategorySelect>
        <BaseECharts ref="echartsRef" height="300px"></BaseECharts>
    </div>
</template>

<script setup lang="ts">
import echarts from '@/components/baseECharts/config'
import type { ECOption } from '@/components/baseECharts/config'
import { BaseEchartsType } from '@/components/baseECharts/type'

const echartsRef = ref<BaseEchartsType>()

const colorList = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#56E4FF00' },
        { offset: 1, color: '#56E4FF90' },
    ]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#2473ef00' },
        { offset: 1, color: '#2473ef90' },
    ]),
]

const dataType = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

const getData = () => {
    const data: any[] = []
    dataType.forEach((item) => {
        const random = Number((Math.random() * 1000).toFixed())
        data.push({ value: random, name: item })
    })
    return data
}
onMounted(() => {
    setOption()
})

const setOption = () => {
    const option: ECOption = {
        graphic: [
            // 自定义左上角标题
            {
                type: 'group',
                children: (() => {
                    const img = new URL('../../../images/title-box-3.png', import.meta.url).href
                    const width = 152
                    const height = 39
                    const title = '销售公司数量统计'
                    return [
                        {
                            type: 'text',
                            style: {
                                align: 'center',
                                verticalAlign: 'middle',
                                text: title,
                                width: width,
                                height: height,
                                lineHeight: height,
                                x: width / 2,
                                y: height / 2,
                                fontSize: 18,
                                fontWeight: 'bold',
                                fill: '#fff',
                                backgroundColor: {
                                    image: img,
                                },
                                textShadowBlur: 20,
                                textShadowColor: '#fff',
                            },
                        },
                    ]
                })(),
            },
        ],
        xAxis: [
            {
                type: 'category',
                data: dataType,
                boundaryGap: false,
                splitLine: { show: false },
                axisLabel: { color: '#2473ef' },
                axisLine: { show: true, lineStyle: { color: '#666' } },
                axisTick: { show: false },
            },
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: { color: '#fff' },
                splitLine: { show: false },
                axisLine: { show: true, lineStyle: { color: '#666' } },
                axisTick: { show: false },
            },
        ],
        grid: {
            top: '20%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        // 图例
        legend: {
            top: '2%',
            right: '40%',
            icon: 'roundRect',
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 15,
            textStyle: { color: '#fff', fontSize: 16 },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        series: [
            {
                name: '公司A',
                type: 'line',
                data: getData(),
                smooth: false,
                showSymbol: true,
                symbolSize: 10,
                itemStyle: {
                    color: '#56E4FF',
                },
                lineStyle: { width: 3 },
                areaStyle: { opacity: 0.8, color: colorList[0] },
            },
            {
                name: '公司B',
                type: 'line',
                data: getData(),
                smooth: false,
                showSymbol: true,
                symbolSize: 10,
                itemStyle: {
                    color: '#2473ef',
                },
                lineStyle: { width: 3 },
                areaStyle: { opacity: 0.8, color: colorList[1] },
            },
        ],
    }
    echartsRef.value?.setOption(option)
}
</script>

<style lang="scss" scoped>
.center-bottom-card {
    position: relative;
    height: 300px;

    .center-bottom-card-category-select {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
    }
}
</style>
